<template>
	<view>
		<view class="backMy">
			<view class="backMy-user" v-if="showsbox">
				<image :src="avatarUrl" mode=""></image>
				<text>{{nickName}}</text>
			</view>
			<view class="backMy-loading" v-if="!showsbox">
				<text>点击登录，开启旅程</text>
				<button plain="true" open-type="getUserInfo" @getuserinfo="getUserInfo" >去登录</button>
			</view>
		</view>
		
		<!-- 购物车 -->
		<view style="padding: 18upx 20upx;">
			<view class="buyCar">
				<block v-for="(item,index) in listdata" :key="index">
					<view class="buyCar-btn" @click="mytab(index)">
						<image :src="item.images" mode=""></image>
						<text>{{item.Uname}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import loadingUser from  '../../element/users.js'
	var db = wx.cloud.database()
	var unicloud = db.collection('users')
	
	export default {
		data() {
			return {
				nickName:"",//用户昵称
				avatarUrl:"",//用户头像
				showsbox:false,
				//数据
				listdata:[
					{
						"images":"../../static/tab/shangping.png",
						"Uname":"购物车"
					},
					{
						"images":"../../static/tab/dingdan.png",
						"Uname":"我的订单"
					},
					{
						"images":"../../static/tab/lvyou.png",
						"Uname":"旅游团"
					},
					{
						"images":"../../static/tab/shoucang.png",
						"Uname":"我的收藏"
					}
				]
			};
		},
		components:{
			
		},
		methods:{
			//授权登录
			shouquan(){
				unicloud.get().then(res=>{
					// console.log(res)
					if(res.data.length==1){
						console.log("已经登陆")
						this.showsbox=true
						this.nickName = res.data[0].nickName
						this.avatarUrl = res.data[0].avatarUrl
					}else{
						console.log("没有登录")
						this.showsbox=false
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			getUserInfo(e){
				console.log(e)
				let user = e.detail.userInfo
				loadingUser(user).then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log(err)
				})
				//刷新一下
				this.shouquan()
			},
			
			//点击进入购物车
			mytab(index){
				console.log(index)
				if(index == 0){
					wx.navigateTo({
						url:'../myCar/myCar'
					})
				}
			}
		},
		created(){
			//授权登录
			this.shouquan()
		}
	}
</script>

<style lang="scss">
	.backMy{
		width: 100%;
		height: 370upx;
		background: linear-gradient(to top,#ffe566 10% , #ffd300 100%);
		display: flex;
		align-items: center;
		.backMy-user{
			display: flex;
			justify-content: start;
			align-items: center;
			padding: 10upx 20upx;
			box-sizing: border-box;
			image{
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				border: 3px solid rgba(0,0,0,0.5);
				margin-right: 25upx;
			}
			text{
				font-size: 40upx;
				color: #6a6a6a;
			}
		}
		.backMy-loading{
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			button{
				width: 280upx;
				height: 70upx;
				line-height: 70upx;
				font-size: 25upx;
				background-color: #007AFF;
				color: #ffffff;
				border-radius: 40upx;
			}
			text{
				color: #ffffff;
				font-size: 40upx;
				margin-bottom: 20upx;
			}
		}
	}
	
	.buyCar{
		width: 100%;
		height: auto;
		background-color: #f1f1f1;
		border-radius:20upx ;
		display: flex;
		justify-content: space-around;
		padding: 25upx 20upx;
		box-sizing: border-box;
		.buyCar-btn{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 50upx;
				height: 50upx;
				padding: 18upx;
			}
			text{
				font-size: 29upx;
				color: #7c7c7c;
			}
		}
	}
</style>
